{% extends "chart/base.twig" %}
{% block content %}

{{ parent() }}

{{ hook('visualize_before_content', chart) }}
{{ hook('visualize_before_svelte_sidebar', chart) }}

<script type="text/javascript" src="/static/js/svelte/visualize.js?v={{ COMMIT_SHA }}"></script>
<link rel="stylesheet" type="text/css" href="/static/css/svelte/visualize.css?v={{ COMMIT_SHA }}">

<div id="svelte-visualize"></div>

<script type="text/javascript">
    require(['svelte/visualize'], function(mod) {
        var App = mod.App;

        mod.init({
            target: document.querySelector('#svelte-visualize'),

            csv: {{chartData|json|raw}},
            chartData: {{chart.toStruct()|json|raw}},
            externalMetadata: {{externalMetadata|json|raw}},
            namespace: {{chart.namespace|json|raw }},
            defaultVisType: '{{defaultVisType}}',
            webToPrint: {{webToPrint|json}},
            customLayouts: {{customLayouts|json}},
            visualizations: {{visualizations|json|raw}},
            visArchive: {{visArchive|json|raw}},

            theme: '{{theme.id}}',
            themes: {{userThemes|json|raw}},
            themeData: {{theme.data|json|raw}},
            teamSettings: {{ teamSettings|json|raw }},
            flags: {{ flags|json|raw }}
        })
    });
</script>


{% endblock %}
